<template>
  <el-form-item
    label="商品名称"
    prop="name"
    :rules="rules"
    v-if="!readonly"
    class="common-form-width"
  >
    <el-input
      v-model="modelValue"
      placeholder="请输入商品名称"
      maxlength="100"
      show-word-limit
      @blur="modelValue = $event.target.value.trim()"
    ></el-input>
  </el-form-item>
  <el-form-item label="商品名称" prop="name" v-else class="common-form-width">
    <div class="item-inner-content">
      <div class="value">
        {{ modelValue }}
      </div>
      <div class="append">
        <slot name="append"></slot>
      </div>
    </div>
  </el-form-item>
</template>

<script lang="ts" setup>
const props = withDefaults(
  defineProps<{
    modelValue: string;
    readonly?: boolean;
  }>(),
  {
    modelValue: "",
    readonly: false,
  }
);

const emits = defineEmits(["update:model-value"]);
const modelValue = computed({
  set(newValue) {
    emits("update:model-value", newValue);
  },
  get() {
    return props.modelValue;
  },
});

const rules = [{ message: "请输入商品名称", required: true, trigger: "blur" }];
</script>

<style scoped lang="scss">
@use "@/components/goodsCenter/styles/common.scss";

.item-inner-content {
  display: flex;
  align-items: center;

  .append {
    margin-left: 10px;
  }
}
</style>
